import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  /* 核心概念 底层原理 */

  /*
    state => 提供一个响应式数据
    取值：this.$store.state.xxx ———— mapState()
  */
  state: {
    count: 0,
  },
  /*
    mutations 同步 => 更改 state 方法, 会在 Devtools 里面做一些记录
    赋值：this.$store.commit('xxx', xxx) ———— mapMutatios()
  */
  mutations: {
    // n => 接收的传过来的参数
    increment(state, n) {
      state.count += n;
    },
    decrease(state) {
      state.count--;
    },
  },
  /*
    actions 异步 => 触发 mutation 方法, 如: 向后台发起请求
    赋值：this.$store.dispatch('xxx', xxx) ———— mapActions()
  */
  actions: {
    // n => 接收的传过来的参数
    increment({ state }, n) {
      setTimeout(() => {
        state.count += n;
      }, 1000);
    },
    decrease({ state }) {
      setTimeout(() => {
        state.count--;
      }, 1000);
    },
  },
  /*
    getters => 借助 Vue 的计算属性 computed 来实现缓存
    取值：this.$store.getters.xxx ———— mapGetters()
  */
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
  // Vue.set 动态添加 state 到响应式数据中
  modules: {},
});

export default store;
